<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=devicd-width , initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>响应式工具</title>
		<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<style>
			div{
				border: 1px solid black;
			}
			[class^="hidden"]{
				color: green;
			}
			
			[class^="visible"]{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="container" style="padding: 40px;">
			<div class="col-xs-6 col-sm-3">
				<span class="hidden-xs">手机设备隐藏</span>
				<span class="visible-xs">在手机设备上可见</span>
			</div>
			<div class="col-xs-6 col-sm-3">
				<span class="hidden-sm">平板设备隐藏</span>
				<span class="visible-sm">在平板设备上可见</span>
			</div>
			<div class="clearfix visible-xs"></div>
			<div class="col-xs-6 col-sm-3">
				<span class="hidden-md">桌面显示器隐藏</span>
				<span class="visible-md">在桌面显示器上可见</span>
			</div>
			<div class="col-xs-6 col-sm-3">
				<span class="hidden-lg">大型显示屏隐藏</span>
				<span class="visible-lg">在大型显示屏上可见</span>
			</div>
		</div>
	</body>
</html>
